<template>
  <div id="total">
    <div id="top">
      <!-- 添加药品按钮 -->
      <el-button type="primary" @click="dialogTableVisible = true">
        添加药品
      </el-button>
      <!-- 添加商品弹框表格 -->

      <el-dialog v-model="dialogTableVisible" title="选择药品">
        <!-- 制单号输入框 -->
        <div id="bounceTotal">
          <div id="orderNumber">
            <el-form ref="searchFormRef" :inline="true" :model="searchData">
              <el-form-item prop="username" label="制单号:">
                <el-input
                  v-model="searchData.username"
                  placeholder="请输入制单号"
                />
              </el-form-item>
            </el-form>
          </div>
          <div>
            <!-- 药品分类选择框 -->
            <div id="audit">
              <div id="num">
                <span>药品分类:&nbsp&nbsp</span>
              </div>
              <!-- elementUi -->
              <el-select v-model="value" class="m-2" placeholder="全部" size="">
                <el-option
                  v-for="item in auditOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>

        <el-table :data="gridData">
          <el-table-column type="selection" width="100" />
          <el-table-column property="id" label="药品编号" width="150" />
          <el-table-column property="Drug_name" label="药品名称" width="150" />
          <el-table-column property="sepc" label="规格" width="150" />
          <el-table-column property="factory" label="生产厂家" width="150" />
        </el-table>

        <!-- 底部分页 -->
        <div id="Pagination">
          <div id="PaginationLeft">
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :total="50"
              class="mt-4"
            />
          </div>
          <div id="PaginationRight">
            <el-button type="primary" @click="dialogTableVisible = false"
              >确认</el-button
            >
          </div>
        </div>
      </el-dialog>

      <!-- 批量设置按钮 -->
      <el-button id="BtnTow" type="primary" @click="dialogFormVisible = true">
        批量设置
      </el-button>
      <!-- 批量设置弹框 -->
      <el-dialog v-model="dialogFormVisible" title="批量设置">
        <el-form :model="form">
          <h3 id="Notice">勾选要设置的药品后，再进行批量设置</h3>
          <!-- 药品数量 -->
          <el-form-item label="药品数量:" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入药品数量"
              v-model="form.name"
              autocomplete="off"
            />
            <!-- 批发价 -->
          </el-form-item>
          <el-form-item label="批发价:" :label-width="formLabelWidth">
            <el-input
              placeholder="批发价金额"
              v-model="form.name"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="处方价:" :label-width="formLabelWidth">
            <el-input
              placeholder="处方价:比例或金额"
              v-model="form.name"
              autocomplete="off"
            />
            <!-- 选择器 -->
            <el-form-item label="" :label-width="10">
              <el-select v-model="form.region" placeholder="*(%比例)">
                <el-option label="+(金额)" value="shanghai" />
                <el-option label="*(%比例)" value="beijing" />
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              应用
            </el-button>
          </span>
        </template>
      </el-dialog>

      <el-button id="buOne" type="primary">提交审核</el-button>
      <el-button type="primary">直接入库</el-button>
    </div>
    <div id="second">
      <div id="left">
        <div>
          <span>单据号: </span>
          <span>{{ data.id }}</span>
        </div>
        <div>
          <span>制单人: </span>
          <span>{{ data.purchaser }}</span>
        </div>
      </div>
      <div id="right">
        <div id="supplier">
          <span id="inner">供应商:&nbsp&nbsp</span>
          <!-- 选择器 -->
          <el-select v-model="value" class="m-2" placeholder="供应商A">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="date">
          <!-- 日期选择器 -->
          <div class="demo-date-picker">
            <div class="block">
              <span class="demonstration">制单日期:&nbsp&nbsp</span>
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="Pick a day"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="third">
      <!-- 批发总金额 -->
      <div id="wholesale">
        <span>批发总金额:&nbsp&nbsp</span>
        <span id="red">1499850.00</span>
      </div>
      <!-- 处方总金额 -->
      <div id="prescription">
        <span>处方总金额:&nbsp&nbsp</span>
        <span id="red">4699530.00</span>
      </div>
      <div id="clear">
        <el-button type="danger">清空数值</el-button>
      </div>
    </div>
    <div id="bottom">
      <div id="form">
        <el-table :data="getOrderData" style="width: 100%">
          <el-table-column type="selection" width="26" />
          <el-table-column align="center" prop="id" label="序号" width="60" />
          <el-table-column
            align="center"
            prop="Drug_name"
            label="药品名称"
            width="200"
          />
          <el-table-column
            align="center"
            prop="sepc"
            label="规格"
            width="120"
          />
          <el-table-column
            align="center"
            prop="factory"
            label="生产厂家"
            width="196"
          />
          <el-table-column
            align="center"
            prop="number"
            label="数量"
            width="120"
          />
          <el-table-column
            align="center"
            prop="remark"
            label="单位"
            width="80"
          />
          <el-table-column
            align="center"
            prop="trade"
            label="批发价"
            width="140"
          />
          <el-table-column
            align="center"
            prop="prescription"
            label="处方价"
            width="140"
          />
          <el-table-column
            align="center"
            prop="trades"
            label="批发额"
            width="140"
          />
          <el-table-column
            align="center"
            prop="pres"
            label="处方额"
            width="140"
          />
          <el-table-column align="center" label="操作" width="160">
            <tpresemplate #default="scope">
              <el-button size="default" @click="handleClick">删除</el-button>
            </tpresemplate>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount } from "vue";
import { mapGetters, mapMutations, useStore } from "vuex";

const store = useStore(); // 表格数据
let data: any = store.state.process.sendData;
// 默认展示数据
const setOrderData = mapMutations(["setOrderData"]).setOrderData.bind({
  $store: store,
});
// 展示默认数据
const getOrderData = computed(
  mapGetters(["getOrderData"]).getOrderData.bind({
    $store: store,
  })
);
// 分页
// 默认每页展示1项
const pageSize = ref(2);
const bill_id = computed(
  mapGetters(["getBillId"]).getBillId.bind({
    $store: store,
  })
);

onBeforeMount(() => {
  setOrderData({
    currentPage: 0,
    pageSize: pageSize.value,
    bill_id: bill_id.value,
  });
});

const value = ref("");
const value1 = ref("");
const options = [
  {
    value: "Option1",
    label: "供应商A",
  },
  {
    value: "Option2",
    label: "供应商B",
  },
  {
    value: "Option3",
    label: "供应商C",
  },
];
// 添加药品
const dialogTableVisible = ref(false);
const gridData = [
  {
    id: "dzm0038",
    Drug_name: "覆盆子",
    sepc: "1g",
    factory: "华润三九",
  },
  {
    id: "dzm0035",
    Drug_name: "茯神",
    sepc: "1g",
    factory: "同仁堂",
  },
  {
    id: "dzm0033",
    Drug_name: "茯苓",
    sepc: "1g",
    factory: "华润三九",
  },
  {
    id: "dzm0032",
    Drug_name: "伏龙肝",
    sepc: "1g",
    factory: "华润三九",
  },
  {
    id: "dzm0034",
    Drug_name: "茯苓皮",
    sepc: "1g",
    factory: "同仁堂",
  },
  {
    id: "dzm0031",
    Drug_name: "薄荷",
    sepc: "1g",
    factory: "华润三九",
  },
];
// 批量设置
const formLabelWidth = "140px";
const dialogFormVisible = ref(false);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
// 删除按钮
const handleClick = () => {
  console.log("click");
};

const tableData = [
  {
    id: 1,
    Drug_name: "白矾",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 2,
    Drug_name: "盐补骨脂",
    sepc: "2g",
    factory: "同仁堂",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 3,
    Drug_name: "鱼脑石",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 4,
    Drug_name: "浮小麦",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 5,
    Drug_name: "白头翁",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 6,
    Drug_name: "白薇",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 7,
    Drug_name: "金钱白花蛇",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
  {
    id: 8,
    Drug_name: "白花蛇舌草",
    sepc: "1g",
    factory: "华润三九",
    number: "1000",
    remark: "g",
    trade: "15.00",
    prescription: "45.00",
    trades: "15000",
    pres: "45000",
  },
];
// 添加药品弹框内的药品名称输入框
const searchData = reactive({
  username: "",
  phone: "",
});
// 添加药品弹框内的审核选择框
const auditOptions = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "中草药",
  },
  {
    value: "Option3",
    label: "中成药",
  },
];
</script>
<style scoped>
#top {
  display: flex;
  justify-content: center;
  align-items: center;
   ;
  background-color: white;
  height: 50px;
  justify-content: flex-end;
}
#second {
  height: 50px;
  margin-top: 10px;
   ;
  display: flex;
  background-color: white;
  align-items: center;
  justify-content: space-between;
}
#left {
  display: flex;
}
#left > div {
  margin-left: 20px;
}
#supplier {
  display: flex;
   ;
}
#inner {
  display: flex;
  align-items: center;
}
.m-2 {
  width: 120px;
}
#right {
  display: flex;
  margin-left: 20px;
  /* border: 1px solid black; */
}
#date {
  display: flex;
   ;
  margin-left: 20px;
}
#third {
  display: flex;
  height: 60px;
   ;
  align-items: center;
  justify-content: flex-end;
}
#wholesale,
#prescription,
#clear {
  margin-left: 20px;
}
#red {
  color: red;
}
#bounceTotal {
  display: flex;
  align-items: center;
   ;
}
#audit {
  display: flex;
  align-items: center;
}
#orderNumber {
  display: flex;
  align-items: center;
   ;
  margin-top: 20px;
}
#Pagination {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
/* 批量设置弹窗 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 100px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
#buOne {
  display: flex;
  margin-left: 10px;
}
#BtnTow {
  display: flex;
  margin-left: 10px;
}
#Notice {
  display: flex;
  margin-left: 68px;
  margin-bottom: 20px;
}
</style>
